@use "sass:map";
@use "sass:math";

// 定义主题颜色映射（暗色和亮色模式均扩展 error 和 success 颜色）
$dark-mode: (
  bg: #0b0c10,
  bg-secondly: #000000,
  // bg-thirdly:#262727
  color: #aaabb9,
  color-secondly: #c5c6c8,
  color-primary: #2a8eb9,
  // 蓝色，主色
  color-error: #9e2323,
  // 红色（错误），较深
  color-success: #26692a // 绿色（成功），较深,,,,,,,,,
);

$light-mode: (
  bg: #f4f6f9,
  bg-secondly: #fff,
  // bg-thirdly:#F5F7FA
  color: #0b0c10,
  color-secondly: #1f2833,
  color-primary: #2e9cca,
  // 蓝色，主色
  color-error: #d32f2f,
  // 红色（错误），较深
  color-success: #2e7d32 // 绿色（成功），较深,,,,,,,,,
);

// 创建一个 mixin 用于生成 CSS 变量，不仅包含原色，还生成透明度从 10 到 100 的版本
@mixin theme($themeData) {
  // 遍历每个变量
  @each $key, $color in $themeData {
    // 原始变量
    --#{$key}: #{$color};
    // 为每个颜色生成不同透明度的变量（10% ~ 100%）
    @for $i from 1 through 10 {
      $alpha: math.div($i, 10);
      --#{$key}-#{($i * 10)}: #{rgba($color, $alpha)};
    }
  }
}

// 应用暗色和亮色主题
.dark-mode {
  @include theme($dark-mode);
}

.light-mode {
  @include theme($light-mode);
}

// 在根元素上使用主题变量
:root {
  background-color: var(--bg);
  color: var(--color);
  border-color: var(--color-secondly);
}

// 可选：定义错误和成功状态专用的样式
.text-error {
  color: var(--color-error);
}

.text-success {
  color: var(--color-success);
}
